import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:hibrid_flutter/video_page/mine_tab_top.dart';
import 'package:hibrid_flutter/video_page/video_list.dart';

class MinePage extends StatefulWidget {
  @override
  _MinePageState createState() => _MinePageState();
}

//String? background;  // 是不是全局的很重要，不是全局不生效
class _MinePageState extends State<MinePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    GlobalKey mineTopKey = GlobalKey();
    var mineTop = MineTabTop(
      key: mineTopKey,
    );

    var tabs = TabBarView(
      controller: _tabController,
      children: [
        VideoList(isPlay: false),
        const Text(
          '私密',
          style: TextStyle(
              color: Colors.black,
              fontSize: 16,
              decoration: TextDecoration.none),
        ),
        const Text(
          '收藏',
          style: TextStyle(
              color: Colors.black,
              fontSize: 16,
              decoration: TextDecoration.none),
        ),
        const Text(
          '喜欢',
          style: TextStyle(
              color: Colors.black,
              fontSize: 16,
              decoration: TextDecoration.none),
        ),
      ],
    );

    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: Container(margin: const EdgeInsets.only(bottom: 48),
        color: Colors.transparent,
        padding: const EdgeInsets.only(bottom: 1), child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                pinned: true,
                floating: true,
                expandedHeight: 490,
                //tabs以上内容的高度
                flexibleSpace: FlexibleSpaceBar(
                  collapseMode: CollapseMode.pin,
                  background: mineTop,
                ),
                bottom: PreferredSize(preferredSize: const Size.fromHeight(50),
//                  Material的使用修改TabBar的背景色
                  child: Material(color: Colors.white, child: TabBar(
                      indicatorColor: const Color.fromARGB(220, 241, 97, 96),
                      labelColor: const Color.fromARGB(190, 241, 97, 96),
                      unselectedLabelColor: const Color(0xff77767c),
                      controller: _tabController,
                      tabs: const [
                        Tab(text: '作品',),
                        Tab(text: '私密',),
                        Tab(text: '收藏',),
                        Tab(text: '喜欢',),
                      ]),),),

              )
            ];
          },
          body: Expanded(
            child: tabs,
          ),
        ),),
    );
  }
}
